<template>
  <div class="col-12 q-gutter-lg">
    <q-card class="q-pa-sm" style="width: 500px;">
      <q-card-section>
        <div class="text-h6">Used as a quote</div>
        <div class="text-subtitle2">bar-distance, icon-distance, icon-image</div>
      </q-card-section>
      <q-activity
        bar-color="lightblue"
        bar-width="3px"
        bar-distance="15px"
      >
        <q-activity-item
          icon-size="40px"
          icon-distance="-13px"
          icon-image="https://cdn.quasar.dev/img/avatar2.jpg"
          style="padding-bottom:5px;padding-top:5px;"
        >
          <div class="testimonial-quote group">
            <div class="quote-container">
              <blockquote>
                <p>Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team.”</p>
              </blockquote>
              <cite><span>Kristi Pezeli</span><br>
                Social Media Specialist<br>
                American College of Family Physicians
              </cite>
            </div>
          </div>
        </q-activity-item>
      </q-activity>
    </q-card>
  </div>
</template>

<script>
export default {
  // name: 'ComponentName',
  data () {
    return {}
  }
}
</script>

<style>
.testimonial-quote {
  font-size: 16px;
}

.testimonial-quote blockquote {
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: gray;
  font-family: Georgia, serif;
  font-size: 1.5em;
  font-style: italic;
  line-height: 1.4 !important;
  margin: 0;
  position: relative;
  text-shadow: 0 1px white;
  z-index: 600;
}

.testimonial-quote blockquote * {
  box-sizing: border-box;
}

.testimonial-quote blockquote p {
  color: #75808a;
  line-height: 1.4 !important;
}

.testimonial-quote blockquote p:first-child:before {
  content: '\201C';
  color: #81bedb;
  font-size: 7.5em;
  font-weight: 700;
  opacity: .3;
  position: absolute;
  top: -.4em;
  left: -.2em;
  text-shadow: none;
  z-index: -300;
}

.testimonial-quote cite {
  color: gray;
  display: block;
  font-size: .8em;
}

.testimonial-quote cite span {
  color: #5e5e5e;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px white;
}

.testimonial-quote {
  position: relative;
}

.testimonial-quote .quote-container {
  padding-left: 10px;
}

.testimonial-quote.right .quote-container {
  padding-left: 0;
  padding-right: 10px;
}

.testimonial-quote.right cite {
  text-align: right;
}
</style>
